<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>结束了</title>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
	<script src="https://webglfundamentals.org/webgl/resources/m4.js"></script>
	<script src="https://webglfundamentals.org/webgl/resources/primitives.js"></script>
	<script src="https://webglfundamentals.org/webgl/resources/texture-utils.js"></script>
	<script src="https://webglfundamentals.org/webgl/resources/chroma.min.js"></script>

	<script type="x-shader/x-vertex" id="vertex">
		attribute vec4 a_position;
		attribute vec3 a_normal;
		uniform mat4 u_projection;
		uniform mat4 u_view;
		uniform mat4 u_world;
		varying vec3 v_normal;
		uniform vec3 u_lightWorldPosition;
		varying vec3 v_light;
		
		void main(){
			gl_Position =  u_projection * u_view * u_world * a_position;
			v_normal=a_normal;
			v_light=u_lightWorldPosition;
		}
	</script>
	<script type="x-shader/x-fragment" id="fragment">
		precision mediump float;
		uniform vec3 u_color;
		varying vec3 v_normal;
		varying vec3 v_light;
		void main(){
			float light = dot((v_light),(v_normal));
			float inLight=step(light,0.);//第一个参数大于等于第二个参数返回1否则返回0
			gl_FragColor = vec4(u_color*vec3(1.,23./255.,7./255.)*light,1.0);
		}
	</script>
	<script>
		const canvas = document.getElementById("canvas");
		
		const width=canvas.width=window.innerWidth
		const height=canvas.height=window.innerHeight
		const gl = canvas.getContext("webgl")
		const aspect = gl.canvas.clientWidth/ gl.canvas.clientHeight;
		const programInfo=webglUtils.createProgramInfo(gl,["vertex","fragment"])
		const cubBufferInfo = primitives.createCubeBufferInfo(
			gl,
			30
		);
		const planeBufferInfo = primitives.createPlaneBufferInfo(
			gl,
			width,  // width
			height,  // height
			1,   // subdivisions across
			1,   // subdivisions down
		);
		gl.useProgram(programInfo.program)

		gl.enable(gl.CULL_FACE);
		gl.enable(gl.DEPTH_TEST);
		function degToRad(d) {
			return d * Math.PI / 180;
		}
		let world=m4.translation(0, 0, 0)

		const cameraMatrix = m4.lookAt([100,140,150],[0,0,0],[0,1,0])
		const viewMatrix=m4.inverse(cameraMatrix)
		
		const projectionMatrix=m4.perspective(degToRad(60), aspect, 1, 2000);

		webglUtils.setBuffersAndAttributes(gl, programInfo, planeBufferInfo);
		webglUtils.setUniforms(programInfo, {
			u_view: viewMatrix,					//视图
			u_projection: projectionMatrix,		//投影
			u_world:world,	//世界
			u_lightWorldPosition:[-200,10,200],
			u_color:[0.5,0.5,0.5],
		});
		gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
		webglUtils.drawBufferInfo(gl, planeBufferInfo);
		drawCube([-35,15,0])
		drawCube([55,15,0])
		drawCube([35,30,-50],[1,2,1])


		function drawCube(translate=[0,0,0],scale=[1,1,1]){
			webglUtils.setBuffersAndAttributes(gl, programInfo, cubBufferInfo);
			let world=m4.translation(...translate)
			m4.scale(world,...scale,world)
			webglUtils.setUniforms(programInfo, {
				u_view: viewMatrix,					//视图
				u_projection: projectionMatrix,		//投影
				u_world:world,	//世界
				u_lightWorldPosition:[-200,10,200],
				u_color:[1.0,0.5,0.5],
			});
			gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
			webglUtils.drawBufferInfo(gl, cubBufferInfo);
		}
		
	</script>
</body>
</html>